<template>
  <div>
    <el-dialog title="发货信息" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="express">
        <el-form-item label="快递公司" :label-width="formLabelWidth">
          <el-select v-model="express.index" placeholder="请选择" :clearable="true">
            <el-option v-for="(item, index) in expressCompanyList" :key="item.name" :label="item.name" :value="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="单号" prop="sn" :label-width="formLabelWidth">
          <el-input v-model="express.sn" type="number" auto-complete="off" placeholder="未走物流可直接提交" @keyup.enter.native="deliver" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="deliver">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="明细" style="font-weight: bold" />
            <el-table :data="props.row.carts" style="width: 100%">
              <el-table-column label="缩略图" width="80">
                <template slot-scope="scope">
                  <img :src="scope.row.goods.thumb[0] ? scope.row.goods.thumb[0].url : ''" width="80">
                </template>
              </el-table-column>
              <el-table-column prop="goods.title" label="商品" />
              <el-table-column prop="quantity" label="数量" />
              <el-table-column prop="goods.price" label="价格" />
            </el-table>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="_id" label="订单号" />
      <el-table-column prop="user.nickName" label="买家" width="" />
      <el-table-column prop="address.mobile" label="电话" width="" />
      <el-table-column label="地址" width="">
        <template slot-scope="scope">
          <span>{{ scope.row.address && scope.row.address.region[0] }}{{ scope.row.address && scope.row.address.region[1] }}{{ scope.row.address && scope.row.address.region[2] }}{{ scope.row.address && scope.row.address.detail }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="statusClass(scope.row.status)" close-transition>{{ statusValue(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="100" />
      <el-table-column prop="createdAt" label="下单时间" :formatter="dateFormat" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" :disabled="scope.row.status == 'SUCCESS' ? false : true" icon="circle-check" @click.native.prevent="showDeliver(scope.$index, tableData)">发货</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" :page-size="pageSize" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import moment from '../../utils/moment'
import * as order from '@/api/order'

export default {
  data() {
    return {
      tableData: [],
      pageIndex: 0,
      pageSize: require('../../utils/config').pageSize,
      total: 0,
      dialogFormVisible: false,
      expressCompanyList: require('../../utils/express-list'),
      order: {

      },
      express: {
        index: '',
        sn: ''
      },
      formLabelWidth: '80px'
    }
  },
  created: function() {
    this.loadData()
    this.countItems()
  },
  methods: {
    loadData: function() {
      order.list({
        pagination: {
          skip: this.pageIndex * this.pageSize,
          limit: this.pageSize
        }
      }).then(response => {
        console.log(response)
        this.tableData = response.data
      })
    },
    showDeliver: function(index, rows) {
      // 显示弹窗，选择快递公司与录入快递单号
      this.dialogFormVisible = true
      this.order = this.tableData[index]
    },
    deliver: function() {
      // 取出当前商品对象，并配置物流信息，通过index来取出快递公司名称与代号
      this.order.express = {
        com: this.expressCompanyList[this.express.index].com,
        name: this.expressCompanyList[this.express.index].name,
        sn: this.express.sn
      }
      order.deliver(this.order).then(response => {
        // console.log(response);
        this.dialogFormVisible = false
        this.loadData()
        this.$message({
          type: response.code === 200 ? 'success' : 'error',
          message: response.msg
        })
      })
    },
    statusClass: function(value) {
      switch (value) {
        case 'INIT':
          return 'danger'
        case 'SUCCESS':
          return 'success'
        case 'FINISH':
          return 'info'
        default:
          return 'primary'
      }
    },
    statusValue: function(value) {
      switch (value) {
        case 'INIT':
          return '待付款'
        case 'SUCCESS':
          return '已付款'
        case 'DELIVERED':
          return '已发货'
        case 'RECEIVED':
          return '客户签收'
        case 'FINISH':
          return '已完成'
        case 'REFUNDED':
          return '退款'
        default:
          return '异常'
      }
    },
    dateFormat: function(row, column) {
      return moment.full(row[column.property])
    },
    handleCurrentChange: function(pageIndex) {
      console.log(pageIndex)
      this.pageIndex = --pageIndex
      this.loadData()
    },
    countItems: function() {
      order.count().then(response => {
        console.log(response)
        this.total = response.data.count
      })
    }
  }
}
</script>
